<template>
	<view class="page">
		<view class="card">
			<view class="card form__list" style="border-bottom: 1rpx solid #e6e6e6;">
				<view class="form__cell">
					<view class="form__label form-top">举报类别</view>
					<picker mode="selector" :value="index" :range-key="'text'" :range="reportArray" @change="_changeReport">
						<view class="uni-input common-right toright" >{{reportArray[index].text}}</view>
					</picker>
				</view>
				<view class="form__cell">
				    <view class="form__label form-top" >举报人</view>
				    <view> 
						<input class="uni-input common-right toright" v-model="lxr" placeholder="请输入举报人姓名" />
					</view>
				</view>
				<view class="form__cell">
				    <view class="form__label form-top">联系电话</view>
				    <view> 
						<input class="uni-input common-right toright" type="number" v-model="lxdh"  placeholder="请输入举报人电话" />
					</view>
				</view>
				<view class="form__cell">
				    <view class="form__label form-top">联系QQ</view>
				    <view> 
						<input class="uni-input common-right toright" type="number" v-model="lxqq"  placeholder="请输入举报人QQ" />
					</view>
				</view>
			</view>

			<view class="card__content">
				<textarea
					class="form__textarea"
					style="height: 300rpx;"
					maxlength="150"
					v-model="memo"
					placeholder="请简明的描述您的投诉信息，方便工作人员更好的核实"
					placeholder-style="color: #999;"
				/>
			</view>
		</view>
		<view class="foot"><button class="foot__btn" type="primary" @click="sendBtn">提交</button></view>
	</view>
</template>

<script>
import { toast,router } from '@/common/util.js';
import {secondgotoReport } from '@/service/getData.js';
import { mapState, mapActions } from 'vuex';

export default {
	onLoad() {
        this.lxr = this.userInfo.realname;
        this.lxdh = this.userInfo.mobile;
        this.lxqq = this.userInfo.qq;
	},
	computed: {
		...mapState(['userInfo'])
	},
	data() {
		return {
			reportArray: [
				{value:'0',text:'请选择举报类别'},
				{value: '1',text: '货源举报'},
				{value: '2',text: '船源举报'},
				{value: '3',text: '船舶交易举报'},
				{value: '4',text: '配件物料举报'},
				{value: '5',text: '资源商贸举报'},
				{value: '6',text: '燃油供应举报'}
			],
			index: 0,
			typeid: 0,
			typename: '',
			lxr: '',
			lxdh: '',
			lxqq: '',
			memo: '',
		};
	},
	methods: {
		...mapActions(['getReportType']),
		_changeReport(e) {
			this.index = e.target.value;
            this.typename = this.reportArray[this.index].text;
			this.typeid = this.reportArray[this.index].value;
		},
		sendBtn() {
			//发送反馈
			if (this.typeid == 0) {
				toast.show('请选择一个类型');
				return;
			}
			if (this.lxdh == '') {
				toast.show('请输入联系电话');
				return;
			}
			if (this.memo == '') {
				toast.show('请输入举报内容');
				return;
			}
			let sent={
				"type":"wyjb",
				"jbid":"0",
				"uid":this.userInfo.uid,
				"uname":this.userInfo.uname,
				"typeid":this.typeid,
				"typename":this.typename,
				"lxr":this.lxr,
				"lxdh":this.lxdh,
				"lxqq":this.lxqq,
				"memo":this.memo,
			}
			console.log("举报数据传出："+JSON.stringify(sent))
			toast.loading();
			secondgotoReport({data:sent}).then(res => {
				toast.hideLoading();
				var arr = eval('('+res.data+')');
				if(arr[0].stat == "1"){
					toast.show('举报成功！')
					router.navigateBack();
				}
			})
		}
	}
};
</script>

<style lang="scss">
@import '@/style/page/card.scss';
@import '@/style/page/form.scss';
@import '@/style/page/foot.scss';
.toright{
	text-align: right;
}
.form-top{
	margin-top: 15upx;
}
</style>
